<template>
	<view class="content">
		<u-search placeholder="请输入网址" v-model="keyword" height="70" :disabled="true" @click="sou"></u-search>
		<view class="content_banner">
			<image src="../../static/banner.png"></image>
			<view class="Notice">
				<view class="Notice_box">公告</view>
			</view>
		</view>
		<view class="list">
			<view class="list_title">
				<p class="tit1">USDT交易对</p>
				<p><span class="tit2">最新价</span><span class="tit3">涨跌幅</span></p>
			</view>
			<view class="list_box" v-for="(item,index) in list">
				<view class="box_left">
					<span class="text1">{{item.symbol}}</span> <span class="text2">/USDT</span>
				</view>
				<view class="box_right">
					<span class="text3">{{item.close}}</span>
					<button type="default" class="btss" @click="dian(index)">{{item.gains}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '首页',
				Newslist: [],
				list:[],
				keyword:""
			}
		},
		onLoad() {
			this.getNews()
		},
		onShow() {
			// setInterval(this.getNews,5000)
		},
		methods: {
			getNews() {
				let _this=this
				this.$api.getMarket().then(res => {
					console.log(res.data.data)
					this.list=res.data.data
				}, err => {})
			},
			dian(i) {
				// console.log(123)
				uni.navigateTo({
					url: "./k?symbol="+this.list[i].name+"&gains="+this.list[i].gains+"&close="+this.list[i].close
				})
			},
			sou(){
				uni.navigateTo({
					url:"./sou"
				})
			}
		}
	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
		background: #f3f3f3;
	}
	.u-search{
		background: #F2F1F5;
	}
	.content {
		width: 100%;

		.content_banner {
			width: 100%;
			height: 470rpx;
			border: 1px solid #F1F1F1;

			image {
				width: 750rpx;
				height: 416rpx;
			}

			.Notice {
				width: 714rpx;
				height: 90rpx;
				background: #007AFF;
				opacity: 1;
				border-radius: 16rpx;
				position: absolute;
				right: 0;
				left: 0;
				top: 430rpx;
				margin: 0 auto;
				background-color: #FFFFFF;

				.Notice_box {
					position: absolute;
					width: 72rpx;
					height: 56rpx;
					background: #3451D9;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					top: 0;
					bottom: 0;
					left: 20rpx;
					right: 0;
					margin: auto 0;
				}
			}
		}

		.list {
			width: 100%;
			height: 100%;
			padding: 0 20rpx;
			.list_title{
				display: flex;
				justify-content: space-between;
				.tit3{
					margin-left: 100rpx;
				}
			}

			.list_box {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items:center;
				.box_left {
					.text1 {
						font-weight: bold;
						color: #000000;
						font-size: 40rpx;
					}

					.text2 {
						color: #d9d9d9;
						font-size: 30rpx;
					}
				}
				.box_right{
					display: flex;
					justify-content: space-between;
					align-items:center;
					.text3{
						font-weight: bold;
						color: #000000;
						font-size: 30rpx;
					}
					.btss{
						width: 170rpx;
						height: 70rpx;
						background-color: #04ac92;
						color: #FFFFFF;
						line-height: 70rpx;
						font-size: 30rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
